<template>
  <div class="common-layout infinite-list" v-infinite-scroll="load" :infinite-scroll-immediate="false">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="20" :offset="3">
            <div class="boxTitle">
              <ul class="nav justify-content-start">
                <li class="nav-item" v-for="nav in navs" :key="nav.id">
                  <RouterLink class="nav-link" aria-current="page" :to="nav.path">{{ nav.name }}</RouterLink>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="">
        <RouterView></RouterView>
      </el-main>
      <!-- <el-footer class="footer">Footer</el-footer> -->
    </el-container>
  </div>
</template>

<script >
import { RouterLink, RouterView } from 'vue-router'
export default {
  data() {
    return {
      navs: [{ id: 1, name: "首页", path: "/home/soft" },{ id: 2, name: "PC", path: "/home/pc" },{ id: 3, name: "PE", path: "/home/pe" }],
      n:1
    }
  },
  methods: {
    load() {
      this.$router.push({ path: '/home/soft', query: { page: this.n++ } })
    },
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.nav-link {
  padding-left: 0px;
  /* color: rgba(rgb(0, 255, 98), green, rgb(147, 147, 167),0.2); */
}

.infinite-list {
  height: 100vh;
  padding: 0;
  margin: 0;
  list-style: none;
}
</style>